<script setup lang="ts">
import { shallowRef, ref, defineAsyncComponent } from 'vue';
import { useLargenScreen } from '@/composables/useLargenScreen';
import { kpiInfo } from '@/common/api/platformChart';
import { useToastLoading } from '@/composables/useToastLoading';
import bg1 from '@/assets/images/platformChart/bg_1.webp';
import seg1 from './components/seg1.vue';

// 定义组件
const seg2 = defineAsyncComponent(() => import('./components/seg2.vue'));
const seg5 = defineAsyncComponent(() => import('./components/seg5.vue'));
const seg6 = defineAsyncComponent(() => import('./components/seg6.vue'));
const seg7 = defineAsyncComponent(() => import('./components/seg7.vue'));

// 定义组件引用
const seg2Ref = shallowRef<InstanceType<typeof seg2>>();

// 监听浏览器窗口变化
const [largenScreen] = useLargenScreen();

// 是否显示已领取
const loading = ref(false);
const info = ref<any>({});

const onLoad = async () => {
  loading.value = true;
  try {
    const res = await kpiInfo({});
    const { data } = res.result;
    info.value = data;
    console.log(data);
  } catch {
    /** empty */
  } finally {
    loading.value = false;
  }
};
onLoad();
useToastLoading(loading);
</script>
<template>
  <div
    class="platformChart bg-[length:100%_auto] bg-no-repeat"
    :class="{ boxShadow: largenScreen }"
    :style="{ backgroundImage: `url(${bg1})` }"
    @click="seg2Ref?.hideTip()"
  >
    <div class="title-1 px-2 mt-16 md:mt-20">平台报表</div>
    <div class="text-[#999] px-2 mt-1">{{ info?.seg1?.endtime || '-' }}</div>
    <!-- 牡丹积分总量 -->
    <seg1 :segObj="info?.seg1" />
    <!-- 红包兑换总量 -->
    <seg2 ref="seg2Ref" :segObj2="info?.seg2" :segObj3="info?.seg3" :segObj4="info?.seg4" />
    <!-- 社区奖励 -->
    <seg5 :segObj="info?.seg5" />
    <!-- 销毁数据 -->
    <seg6 :segObj="info?.seg6" />
    <!-- 生态应用 -->
    <seg7 :segObj7="info?.seg7" :segObj8="info?.seg8" :segObj9="info?.seg9" />
    <!-- 底部安全区 -->
    <div class="van-safe-area-bottom"></div>
  </div>
</template>
<style lang="less">
.title-1 {
  @apply text-xl md:text-2xl font-medium;
}
.title-2 {
  @apply font-medium text-lg md:text-xl;
}
.num-1 {
  @apply text-sm md:text-base font-medium;
}
.tag-checked {
  color: #ffffff;
  background: #4376ff;
}
.scroll-hidden {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.scroll-hidden::-webkit-scrollbar {
  width: 0px;
}

.scroll-hidden::-webkit-scrollbar-track {
  background-color: transparent;
}

.scroll-hidden::-webkit-scrollbar-thumb {
  background-color: transparent;
}
</style>
<style lang="less" scoped>
.platformChart {
  padding: 10px;
  background-color: #f6f6f6;
  max-width: 450px;
  margin: 0 auto;
}

.platformChart.boxShadow {
  margin: 3vh auto;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
</style>
